<template>
	<div class="main clear">
		<div class="main-left">
			<div class="ranking-title"></div>
			<ul id="nav" class="nav">
				<li v-for="(item,index) in menu" :class="index == 0 && 'active'" :key="item.menu_id" @click="navTab(item.menu_id,index)">{{ item.menu_name }}</li>
			</ul>
		</div>
		<div class="center">
			<div class="ranking-title">视频榜单</div>
			<ranking-list :menuId="menu_id"></ranking-list>
		</div>
		<div class="main-right">
			<topic></topic>
		</div>
	</div>
</template>

<script>
import topic from '@/components/topic'
import rankingList from '@/components/ranking-list'
import { getmenu } from '@/api';
export default {
	data() {
		return {
			menu: [],
			menu_id: null,
		}
	},
    components: { topic, rankingList },
	methods: {
		navTab(val,index){
			this.menu_id = val;
			let liArr = document.getElementById('nav').children;
			for(let i=0;i<liArr.length;i++){
				liArr[i].className = '';
			}
			liArr[index].className = 'active';
		},
		setMenu(){
			let para={
				// menu_id: this.aid
			};
			getmenu(para).then(res => {
				if(res.data){
					let arr = res.data;
					arr.reverse();
					arr = arr.splice(1);
					arr.length=8;
					this.menu_id = arr[0].menu_id;
					this.menu = arr;  
				}
			});
		},
	},
	mounted() {
		this.setMenu();
	}
}
</script>

<style scoped lang="scss">
.main {
	padding-bottom: 20px;
	.ranking-title {
		height: 40px;
		text-align: right;
		line-height: 40px;
		font-size: 23px;
		margin-bottom: 5px;
	}
	.main-left {
		float: left;
		width: 80px;
		.nav {
			li{
				cursor: pointer;
				border-radius: 2px;
				height: 30px;
				width: 80px;
				line-height: 30px;
				text-align: center;
				margin: 10px 0;
			}
			li.active,li:hover {
				background: #ff5722;
				color:#fff;
			}
		}
	}
	.center {
		width: 795px;
		margin-left: 20px;
		float: left;
	}
	.main-right {
		float: right;
		width: 285px;
	}
}
</style>